<template>
  <div class="p-3">
    <div class="position-relative mb-2">
      <div class="header-title">徐工农机立体仓库数据看板</div>
      <a href="#" class="position-absolute header-warehouse" @click.prevent="exit_()">{{ warehouse }}</a>
      <span class="position-absolute header-time">{{ datetimeInfo }}</span>
    </div>

    <div class="d-flex mb-2 bgcolor-dark" style="height: 5.5rem;">
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">工作站</div>
        <div class="text-primary fw-bold fs-4 text-center">2/4</div>
      </div>
      <div class="py-3 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日入库订单</div>
        <div class="text-primary fw-bold fs-4 text-center">15</div>
      </div>
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">入库物料数</div>
        <div class="text-primary fw-bold fs-4 text-center">1105</div>
      </div>
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">待上架</div>
        <div class="text-primary fw-bold fs-4 text-center">0</div>
      </div>
      <div class="py-3 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日出库订单</div>
        <div class="text-primary fw-bold fs-4 text-center">21</div>
      </div>
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已完成订单</div>
        <div class="text-primary fw-bold fs-4 text-center">12</div>
      </div>
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">缺件订单</div>
        <div class="text-primary fw-bold fs-4 text-center">1</div>
      </div>
      <div class="py-3" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已发货件数</div>
        <div class="text-primary fw-bold fs-4 text-center">2105</div>
      </div>
    </div>

    <div class="row gx-2" style="height: calc(100vh - 12.5rem)">
      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 1rem)/3)">
          <div class="text-white text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">已完成订单</div>
          <vue3-seamless-scroll :list="list1" :step="0.3" :limitScrollNum="2" class="scroll-wrap">
            <ul class="list-unstyled text-white p-2">
              <li v-for="item in list1" :key="item.id" class="mb-3">{{ item.text }}</li>
            </ul>
          </vue3-seamless-scroll>
        </div>
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 1rem)/3)">
          <div class="text-white text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">作业中订单</div>
        </div>
        <div class="bgcolor-dark" style="height: calc((100% - 1rem)/3)">
          <div class="text-warning text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">异常订单</div>
        </div>
      </div>

      <div class="col-8" style="height: 100%;">
        <div class="mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="row gx-1" style="height: 100%;">
              <div class="col-3" style="height: 100%;">
                <PieStorageLocUsageSuammryBlock></PieStorageLocUsageSuammryBlock>
              </div>
              <div class="col-6" style="height: 100%;">
                <PieStorageLocLaneUsageSummaryBlock></PieStorageLocLaneUsageSummaryBlock>
              </div>
              <div class="col-3" style="height: 100%;">
                <PieStorageMaterialChangeSummaryBlock></PieStorageMaterialChangeSummaryBlock>
              </div>
          </div>
        </div>
        <div style="height: calc((100% - 0.5rem)/2)">
          <LineOrderMonthWorkSummaryBlock></LineOrderMonthWorkSummaryBlock>
        </div>
        
      </div>

      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark" style="height: 100%;">
          <div class="text-danger text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">异常信息</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { format } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import { useRouter } from 'vue-router'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

import PieStorageLocUsageSuammryBlock from '@/views/pie-storageLocUsageSuammryBlock.vue';
import PieStorageLocLaneUsageSummaryBlock from '@/views/pie-storageLocLaneUsageSummaryBlock.vue';
import PieStorageMaterialChangeSummaryBlock from '@/views/pie-storageTimeSummaryBlock.vue';
import LineOrderMonthWorkSummaryBlock from '@/views/line-orderMonthWorkSummaryBlock.vue';


import useWarehouseStore from '@/stores/warehouse.js';

const router = useRouter();

const warehouseStore = useWarehouseStore();

const datetimeInfo = ref('');
const warehouse = ref(warehouseStore.getWarehouse());

const list1 = ref([
  { id: 1, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 2, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 3, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 4, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 5, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 6, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 7, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 8, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 9, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' },
  { id: 10, text: '已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单已完成订单' }
]);

onMounted(() => {
  startDatetime();
});

function startDatetime() {
  datetimeInfo.value = format(new Date(), 'yyyy-MM-dd(cccc) HH:mm:ss', {locale:zhCN});
  setTimeout(() => {
    startDatetime();
  }, 1000);
}

function exit_() {
  warehouseStore.clearWarehouse();
  router.push('/warehouse-select');
}
</script>


<style scoped>
.header-title {
  background: url('@/assets/header-title-bg.png') center no-repeat;
  background-size: 100% 100%;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-size: 1.75rem;
  color: #bde4ff;
  letter-spacing: 0.325rem;
}

.header-warehouse {
  left: 0;
  bottom: 0;
  font-size: 1.25rem;
  color: #bde4ff;
}

.header-time {
  right: 0;
  bottom: 0;
  font-size: 1.25rem;
  color: #bde4ff;
}

.scroll-wrap {
  height: calc(100% - 2.6rem);
  overflow: hidden;
}
</style>
